<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
    <script>
        function addEmp(){
            // 创建tr
            let trChild = document.createElement("tr");

            // 创建td
            let nameTd = document.createElement("td");
            let salaryTd = document.createElement("td");
            let operateTd = document.createElement("td");

            // 获取用户输入的数据
            let name = document.getElementById("name").value;
            let salary = document.getElementById("salary").value;

            // 创建文本节点
            let nameText = document.createTextNode(name);
            let salaryText = document.createTextNode(salary);

            // 创建超链接
            let aChild = document.createElement("a");
            // 创建超链接文本
            let aText = document.createTextNode("删除");
            // 将超链接文本添加到超链接中
            aChild.appendChild(aText);
            // 设置超链接两个属性的值
            aChild.href = "javascript:;";
            aChild.onclick = function(){
                this.parentNode.parentNode.remove();
            }
            // 分别将元素节点添加到对应位置
            nameTd.appendChild(nameText);
            salaryTd.appendChild(salaryText);
            operateTd.appendChild(aChild);

            // 将td插入到tr中
            trChild.appendChild(nameTd);
            trChild.appendChild(salaryTd);
            trChild.appendChild(operateTd);

            // 将tr添加到表格中
            let tChild = document.getElementById("t");
            tChild.appendChild(trChild);
        }
    </script>
</head>
<body>
<h1>添加员工信息</h1>
姓名:<input type="text" id="name"><br>
工资:<input typeof="text" id="salary"><br>
<button onclick="addEmp()">添加</button>
<hr>
<!--
    需求一:添加操作
        在表格中,初始情况下是没有员工的
        当用户在表单元素中输入对应信息后点击添加
        此时会在当前表格中添加一行信息,这一行的信息就是表单元素中添加的员工信息
    需求二:删除操作
        当用户点击了表格中某一个员工所在这一行的删除链接后
        将该员工从表格中移除
-->
<table id="t" border="1" style="width: 500px;background-color: #dddddd;">
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>操作</th>
    </tr>
    <!--<tr>-->
        <!--<td>admin</td>-->
        <!--<td>1000</td>-->
        <!--<td>-->
            <!--<a href="javascript:;">删除</a>-->
        <!--</td>-->
    <!--</tr>-->
</table>
</body>
</html>